<template>
  <!-- 开屏广告 -->
  <view class="content">
    <swiper class="swiper" :class="advData.adList.length==1?'on':''" :autoplay="autoplay" :duration="duration"
            @change="stopChange" v-if="advData.adList.length" :indicator-dots="advData.adList.length>1?true:false"
            indicator-active-color="#8B4513" circular="true" :interval="3000">
      <swiper-item v-for="(item,index) in advData.adList" :key="index" @click="jump(item.linkUrl)">
        <view class="swiper-item">
          <view class="swiper-item-img">
            <image :src="item.imageUrl" mode="aspectFill"></image>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="jump-over" :style="{ top: navH + 'rpx' }" @tap="launchFlag()">跳过
      <text
          v-if="closeType == 1">{{ time }}
      </text>
      <slot name="bottom"></slot>
    </view>
  </view>
</template>

<script>
let app = getApp();
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
//let menuHeight = uni.getMenuButtonBoundingClientRect().height; // 获取胶囊高度并设置标题高度
export default {
  data() {
    return {
      //iSindicator: false,
      autoplay: true,
      duration: 300,
      jumpover: '跳过',
      experience: '立即体验',
      time: this.advData.splashAdShowTime,
      timecount: undefined,
      // #ifndef H5
      navH: 20 + sysHeight * 2,
      // #endif
      // #ifdef H5
      navH: 60 + sysHeight * 2,
      // #endif

    }
  },
  props: {
    advData: {
      type: Object,
      default: () => {
      }
    },
    // 1 倒计时 2 手动关闭(预留)
    closeType: {
      type: Number,
      default: 1
    }
  },
  mounted() {
    this.timer()
  },
  beforeDestroy() {
    clearInterval(this.timecount)
  },
  methods: {
    stopChange() {
      if (this.advData.adList.length == 1) {
        return false
      }
    },
    timer() {
      var t = this.advData.splashAdShowTime || 5
      this.timecount = setInterval(() => {
        t--
        this.time = t
        if (t <= 0) {
          clearInterval(this.timecount)
          this.launchFlag()
        }
      }, 1000)
    },
    launchFlag() {
      clearInterval(this.timecount)
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    jump(url) {
      if (url) {
        clearInterval(this.timecount)
        uni.redirectTo({
          url: url
        })
      }
    },
  }
}
</script>
<style lang="scss" scoped>
page,
.content {
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  padding: 0;
}

.swiper {
  width: 100%;
  height: 100vh;
  background: #FFFFFF;
}

.swiper-item {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  display: flex;
  /* justify-content: center; */
  align-items: flex-end;
  flex-direction: column-reverse
}

.swiper-item-img {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
}

.swiper-item-img image {
  width: 100%;
  height: 100%;
}

.jump-over {
  position: absolute;
  height: 45rpx;
  line-height: 40rpx;
  padding: 0 15rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #b09e9a;
  border: 1px solid #b09e9a;
  z-index: 999;
  left: 30rpx;
}
</style>